<template>
  <div class="add_shop">
    <el-form label-width="100px" label-position="right">
      <!-- <el-form-item label="商户名称:">
        <el-input placeholder="请输入商户名称"></el-input>
      </el-form-item>

      <el-form-item label="联系人:">
        <el-input placeholder="请输入联系人名称"></el-input>
      </el-form-item>

      <el-form-item label="手机号:">
        <el-input placeholder="请输入联系人手机号"></el-input>
      </el-form-item>

      <el-form-item label="经营类型:">
        <el-select placeholder="请选择经营类型">
          <el-option>加油站</el-option>
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item label="商户logo:"></el-form-item> -->

      <el-form-item label="商户地址:">
        <!-- <el-input style="width: 500px;"></el-input>
        <div class="address--box">

        </div> -->
        <el-input id="tipinput" @keyup.enter.native="search" placeholder="请输入要搜索的位置" class="school-address">
          <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
        </el-input>
        <p style="color: red;">点击地图可以设置坐标位置</p>
        <el-amap vid="schoolLocation" :amap-manager="amapManager" :zoom="zoom" :events="events" :scrollWheel="false" style="height: 300px;" />
      </el-form-item>
      <!-- <el-form-item label="登录密码:">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="银行账号:">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="分润比例:">
        <el-input></el-input>
      </el-form-item> -->
    </el-form>




  </div>
</template>

<script>
  import VueAMap from 'vue-amap'
  const amapManager = new VueAMap.AMapManager()

  export default {
    data() {
      return {
        // form: {
        //   longitude: 0,
        //   latitude: 0,
        // },
        map: null,
        zoom: 12,
        amapManager,
        marker: [],
        placeSearch: null,
        events: {
          init(map) {
          // zoomEnable: false, //  地图是否可缩放，默认值为true
            // map.setDefaultCursor('crosshair') //  鼠标样式
            // map.addControl(new AMap.ToolBar({ visible: true }))
          },
          'complete': () => {
            const _this = this

            this.map = amapManager.getMap()
            this.logMapinfo()
            this.marker = new AMap.Marker({
              // position: [_this.form.longitude, _this.form.latitude]
            })
            this.marker.setMap(this.map)
            // this.map.setCenter([_this.form.longitude, _this.form.latitude]) // 设置地图中心点
          },
          'moveend': () => {
            this.logMapinfo() //  绑定地图移动事件
          },
          'click': (e) => {
            const _this = this
            //  移除上一次点击坐标点
            // this.map.remove(this.marker)
            this.map.clearMap() //  清楚所有覆盖物
            this.marker = new AMap.Marker({
              position: [e.lnglat.getLng(), e.lnglat.getLat()]
            })
            this.marker.setMap(this.map)

            //  坐标转地址
            // const geocoder = new AMap.Geocoder({
            //   // city: "010", //城市设为北京，默认：“全国”
            //   // radius: 1000 //范围，默认：500
            // })
            geocoder.getAddress([e.lnglat.getLng(), e.lnglat.getLat()], function(status, result) {
              if (status === 'complete' && result.regeocode) {
                _this.form.longitude = e.lnglat.getLng()
                _this.form.latitude = e.lnglat.getLat()
                // _this.form.schoolAddress = result.regeocode.formattedAddress
              } else {
                console.log('根据经纬度查询地址失败')
              }
            })

            console.log('您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！')
          }
        }
      }
    },

    mounted() {

    },

    methods: {
      /**
       * 获取当前城市信息
      */
      logMapinfo() {
        const _this = this
        this.map.getCity(function(info) {
          // _this.placeSearch = new AMap.PlaceSearch({
          //   city: info.citycode, // 兴趣点城市
          //   pageSize: 1, // 单页显示结果条数
          //   map: _this.map
          // })

          //  注册监听，当选中某条记录时会触发
          // AMap.event.addListener(new AMap.Autocomplete({ input: 'tipinput' }), 'select', function(e) {
          //   _this.map.clearMap() //  清楚所有覆盖物
          //   _this.placeSearch.setCity(e.poi.adcode) //  城市编码
          //   _this.form.longitude = e.poi.location.lng
          //   _this.form.latitude = e.poi.location.lat
          //   //  关键字查询查询
          //   _this.placeSearch.search(e.poi.name, function(status, result) {
          //   // this.map.clearMap();  //  清楚所有覆盖物
          //   })
          // })
        })
      },

      search() {
        const _this = this
        this.map.clearMap() //  清楚所有覆盖物
        this.placeSearch.search(_this.form.schoolAddress, function(status, result) {
          if (result.poiList) {
            _this.form.longitude = result.poiList.pois[0].location.lng
            _this.form.latitude = result.poiList.pois[0].location.lat
          }
          document.getElementsByClassName('amap-sug-result')[0].style.visibility = 'hidden' //  隐藏搜索提示
        })
      },
    }
  }
</script>

<style scoped>
  .el-form-item {
    display: inline-block;
  }

  .el-input {
    width: 200px;
  }

  .address--box {
    height: 240px;
    width: 500px;
    border: 1px solid red;
  }

  #tipinput {
    position: absolute;
    width: 200px;
    height: 30px;
    z-index: 1;
    top: 50px;
    right: 30px;
  }





</style>
